<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id='code'>
    </div>
    <script id='template-head' type="text/template">
        <h3 on-click={this.handlerClick}><span>sssss</span>{this.state.value}</h3>
    </script>



    <script src="template.js"></script>
    <script src="MyReact.js"></script>
    <script>

        var Item = MyReact.Extend(MyReact.BaseComponent, function (props) {
            MyReact.BaseComponent.call(this, props);
            this.state = { value: this.props.value }

            if (typeof Item._inited_ == "undefined") {

                Item.prototype.stateChange = function (e) {
                    this.setState({ value: e.target.value })
                }

                //覆盖获取模板内容的方法
                Item.prototype.render = function () {
                    return "<input value={this.state.value} on-keyup={this.stateChange} /><p>this.state.value:{this.state.value}</p><p>this.props.value:{this.props.value}</p><br/><br/>";
                }
                Item._inited_ = true;
            }
            this.stateChange = this.stateChange.bind(this);

        }); //继承 基础组件

        var ItemList = MyReact.Extend(MyReact.BaseComponent, function (props) {
            MyReact.BaseComponent.call(this, props);
            if (typeof ItemList._inited_ == "undefined") {
                //覆盖获取模板内容的方法
                //列表数据比较特殊，所以也特殊处理
                ItemList.prototype.render = function () {
                    return this.createItem(this.props.list, function (index, item) {
                        return this.createItemComponent("<div><p>这是 Item子组件</p><component com-name=Item value={this.Index+':'+this.Item.value}></component></div>", index, item);
                    })
                }
                ItemList._inited_ = true;
            }

        }); //继承 基础组件



        var MyForm = MyReact.Extend(MyReact.BaseComponent, function (props) {
            MyReact.BaseComponent.call(this, props);

            this.state = { value: "", listvalue: "", list: [{ value: 111 }, { value: 2222 }, { value: 33333 }] }

            if (typeof MyForm._inited_ == "undefined") {

                //初始化后执行
                MyForm.prototype.componentDidMount = function () {
                    this.setState({ listvalue: JSON.stringify(this.state.list) })
                }


                MyForm.prototype.stateChange = function (e) {
                    this.setState(function (preState) {
                        for (var key in preState.list) {
                            preState.list[key].value = e.target.value 
                        }
                        return { value: e.target.value , list: preState.list, listvalue: JSON.stringify(preState.list) }
                    })
                }
                MyForm.prototype.listChangeAdd = function (e) {

                    this.setState(function (preState) {
                        var newlist = [{ value: preState.value }].concat(preState.list);
                        return { list: newlist, listvalue: JSON.stringify(newlist) }
                    })
                }
                MyForm.prototype.listChangeRemove = function (e) {

                    this.setState(function (preState) {
                        preState.list.pop();
                        return { list: preState.list, listvalue: JSON.stringify(preState.list) }
                    })
                }
                MyForm.prototype.listUpdate = function (e) {

                    this.setState(function (preState) {
                        for (var key in preState.list) {
                            preState.list[key].value = new Date().getTime();
                        }
                        return { list: preState.list, listvalue: JSON.stringify(preState.list) }
                    })
                }


                //覆盖获取模板内容的方法
                MyForm.prototype.render = function () {
                    return "<input value={this.state.value} on-keyup={this.stateChange} /><input type='button' value={'提交'} on-click={this.listChangeAdd} /><input type='button' value={'移除'} on-click={this.listChangeRemove} /><input type='button' value={\"更新list\"} on-click={this.listUpdate} /><p>this.state.value:{this.state.value}</p><p>this.state.list:{this.state.listvalue}</p><p><component com-name=ItemList list={this.state.list} ></component></p>";
                }
                MyForm._inited_ = true;
            }
            this.stateChange = this.stateChange.bind(this);
            this.listChangeAdd = this.listChangeAdd.bind(this);
            this.listChangeRemove = this.listChangeRemove.bind(this);
            this.listUpdate = this.listUpdate.bind(this);

        }); //继承 基础组件


        MyReact.DOMRender("<component com-name=MyForm ></component>", document.getElementById("code"))


    </script>
</body>

</html>